<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>道具编辑</title>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="Public/Plug/layui/extend/formSelects-v4.css">
    <link rel="stylesheet" href="Public/Static/iconfont/iconfont.css">
    <!--<link rel="stylesheet" href="Public/Static/Home/css/yxlmGoods.css">-->
    <!--图标和默认样式-->
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

</head>
<style>
    .update{
        position: absolute;
        top: 60px;
        left: 23px;
        height: 20px;
        width: 80px;
        color: #1BA194;
        background-color: #ccc;
        opacity: 0.8;
    }

    .layui-tab-title{
        position: relative;
        left: 0;
        height: 121px;
        white-space: nowrap;
        font-size: 0;
        border-bottom: 1px solid #e2e2e2;
        transition: all .2s;
        -webkit-transition: all .2s;
    }

    .layui-tab-title .layui-this:after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 121px;
        border: 1px solid #e2e2e2;
        border-bottom-color: #fff;
        border-radius: 2px 2px 0 0;
        box-sizing: border-box;
        pointer-events: none;
    }

    .form-div-margin-top {
        margin-top: 8px;
        margin-right: 15px;
    }

    .form-div-margin-right {
        margin-right: 15px;
    }

    .poppup-edit {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        background: #000;
        background: rgba(0, 0, 0, .8);
        border-radius: 5px;
        z-index: 100;
        width: 700px;
        min-height: 500px;
        background-color: white;
        border: 1px solid #ccc
    }
    .modal-header{
        border: 0;
        padding: 0 !important;
    }
    .modal-header a{
        float: right;
        text-decoration: none;
    }
    .is-update{
        position: absolute;
        bottom: 0;
        left: 12px;
        width: 66px;
        text-align: center;
        height: 20px;
        line-height: 19px;
        background-color: #009688;
        opacity: 0.8;
        color: #ffffff;
    }
    .blue{
        color: blue;
    }

    .item-div{
        text-align: center;margin: 10px 0px 0px 10px
    }
    .item-div p {
        width: 90px;height: 30px
    }

    @media screen and (min-width: 1000px){
        .layui-col-md1 {
             width: initial !important; 
        }
    }
    .imgtextlist {
        float: left;
        padding: 30px 0 0;
        position: relative;
    }
    .imgtextlist .sbg {
        display: none;
        position: absolute;
        top: 0;
        left: 12px;
        background: #00a383;
        opacity: .8;
        cursor: pointer;
    }
    .imgtextlist .sbg, .imgtextlist img {
        width: 66px;
        height: 65px;
    }
    .sbg .commico-search {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -12px 0 0 -12px;
    }
    .commico-search {
        display: block;
        width: 23px;
        height: 26px;
        background-position: -582px -86px;
    }
    .commspr {
        background-repeat: no-repeat;
        display: inline-block;
        background-image: url(https://game.gtimg.cn/images/lol/web201310/page.png?d=20131230);
    }
    /*合成所需*/
    #props-search{
        vertical-align: middle;
        display: inline-block;
        margin-left: 6px;
    }
    .props-inp-box{
        position: relative;
        border: 1px solid;
        border-color: #E6E6E6;
        width: 527px;
        min-height: 30px;
        padding: 5px;
        cursor: pointer;
    }
    .props-inp-box .daoju span{
        display: inline-block;
        /*width: 30px;*/
        border: 1px solid #009688;
        background-color: #009688;
        color: #fff;
        margin: 2px 6px;
        padding: 6px;
        border-radius: 5px;
    }
    .props-inp-box span i{
        margin-left: 8px;
        color: #C2C2C2;
        cursor: pointer;
    }
    .props-inp-box input{
        height: 30px;
        width: 100px;
        border: 0;
        margin: 2px 6px;
        display: inline-block;
        padding-left: 0 !important; 
    }
    .props-inp-box input:focus{ outline: none;}
    .propS{
        width: 527px;
        height: 150px;
        overflow-y: auto;
        border: 1px solid;
        margin-top: 1px;
        border-color: #E6E6E6;
    }
    .propS span{
        display: block;
        padding: 10px;
        color: #666;
        cursor: pointer;
    }
    .propS span:hover{
        background-color: #d2d2d2;
    }
    .propS p{
        margin: 0 !important;
    }
    .selectData{
        line-height: 30px;
        cursor: pointer;
    }
    .hide{
        display: none;
    }
    .inp-box{
        width: 450px;
        display: inline-block;
    }
    .select-icon{
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -14px;
        margin-right: 10px;
    }
    .title-font{
        font-weight: 100;
        width: 100px;
        text-align: right;
    }
    .layui-input-block{
        /*margin-left: 90px;*/
        /*min-height: 36px;*/
    }
    .padding0{
        padding: 0 !important;
    }
    .layui-form-label{
        width: 100px !important;
        padding: initial !important;
        line-height: 36px;
    }
    .layui-form-radio{
        margin: initial !important;
    }
    .his-row{
        display: inline-block;
        margin-right: 20px;
    }
    .width-lg10{
        width: 100% !important;
    }
    .hero-inp{
        width: 65px !important;
    }
    .mg-no{
        display: block;
        padding: 10px;
        color: #666;
        cursor: pointer;
    }
    /**/
    #item-history-content h2{
        font-size: 20px !important;
        padding-left: 14px !important;
    }
</style>

<body>

<div class="admin-main" style="margin-left: 10px">
    <blockquote  style="display: none;"  class="layui-elem-quote">
        <button  class="layui-btn layui-btn-small add">
            <i class="layui-icon">&#xe608;</i> 添加管理员
        </button>
    </blockquote>
    <fieldset  style="display: none;"  class="layui-elem-field">
        <div class="layui-field-box">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>昵称</th>
                    <th>最近登录</th>
                    <th>最近ip</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <foreach name="user_info" key="k" item="vo">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>
                            <a data="1" class="layui-btn layui-btn-mini layui-btn-normal edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                            <a data="2" class="layui-btn layui-btn-danger layui-btn-mini del"><i class="layui-icon">&#xe640;</i>删除</a>
                        </td>

                    </tr>
                </foreach>
                </tbody>
            </table>
        </div>
    </fieldset>
    <div style="display: none;" class="admin-table-page">
        <div id="page" class="page">
            1
        </div>
    </div>

    <div style="position: relative;" class="layui-row">
        <form class="layui-form" action="">
            <div class="layui-col-md12">
                <div style="margin: 20px 0px 0px 20px;">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input lay-filter="prop-type" type="radio" name="type_id" value="" title="所有物品" checked>
                            {foreach $type as $val}
                            <input lay-filter="prop-type" type="radio" name="type_id"  value="{$val.alias}" title="{$val.title}">
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div style="margin-top: 60px;" class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md3">
                            <label class="layui-form-label">按地图</label>
                            <div class="layui-input-block">
                                <select lay-filter="prop-map" name="map_id">
                                    <option value="">全地图</option>
                                    {foreach $map as $val}
                                    <option value="{$val.alias}">{$val.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-md5">
                            <div class="layui-row">
                                <div class="layui-form-item">
                                    <div class="layui-col-md4 layui-col-md-offset2"><input type="text" name="title" value="{$title}" placeholder="关键字" autocomplete="off" class="layui-input" onchange="changeSubmit()"></div>
                                    <div class=" layui-col-md-offset1 layui-col-md5">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo" id="search">搜索</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button></div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="layui-col-md3">
                            <div class="layui-row">
                                <div class="layui-col-md1 layui-col-md-offset1">
                                    <a href="/index.php?route=Prop/preview&iActId={$iActId}"> <button style="margin-bottom: 10px;" class="layui-btn">发布预览</button><br/></a>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div  class="layui-col-md12" style="position: absolute; top: 70px;left: 130px;">
                <div class="layui-form-item">
                    <div class="layui-input-block layui-hide" id="child">
                    </div>
                </div>
            </div>
        </form>

    </div>

    <div class="row">

        <div id="jSearchItemDiv" class="layui-row layui-col-md8 imgtextlist">
            {if empty($item)}
            <div style="align-content: center;margin-left: 50%" >没有找到数据</div>
            {/if}
            {foreach $item as $val}
            <div class="item-div layui-col-md1 " >
                <div style="position: relative" class="item" id="{$val.id}" >
                    <img  width="64px" height="64px" src="{$val.iconPath}" alt="{$val.itemId}{$val.name}" lay-data='{$val.json}' >
                    {if $val.isUpdate == 1}
                    <div class="is-update">有更新</div>
                    {/if}
                </div>
                <p>{$val.name}</p>
                <span class="sbg"><i class="commspr commico-search"></i></span>
            </div>
            {/foreach}
        </div>

        <div class="layui-col-md4">
            <div class="layui-row">
                <div class="layui-col-md1 layui-col-md-offset1">
                    <a href="{U('Prop/preview')}"> <button style="margin-bottom: 10px;" class="layui-btn">发布预览</button><br/></a>
                </div>
            </div>

            <!--<div style="position: fixed;  margin-top: 10px;" class="layui-row layui-col-md6">-->
            <div id="item-history" style="margin-right: 10px;position: absolute">
                <div class="layui-col-md12 ">
                    <div class="layui-collapse">
                        <!--道具变更历史-->
                        <div id="item-history-content" style="" class="layui-colla-item">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div id="item-edit" class="poppup-edit layui-hide">
    <div class="modal-header">
        <a href="javascript:void(0);"><i class="iconfont icon-guanbi" style="font-size: 28px;"></i></a>
    </div>

    <form class="layui-form" >
        <div class="layui-row layui-col-space10 layui-form-item form-div-margin-top">
            <div class="layui-col-lg3 width-lg10">
                <label class="layui-form-label">itemId：</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id" id="id" value="">
                    <input type="text" name="itemId" id="itemId" value="" readonly autocomplete="off" class="layui-input padding0" style="border: none">
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10 layui-form-item form-div-margin-top">
            <div class="layui-col-lg9 width-lg10">
                <label class="layui-form-label mapsIsChange">所属地图：</label>
                <div class="layui-input-block">
                    {foreach $map as $k => $val}
                    <input type="checkbox" class="map" name="map[{$k}]" title="{$val.name}" value="{$val.alias}" lay-skin="primary">
                    {/foreach}

                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item form-div-margin-right">
            <div class="layui-col-lg6 width-lg10">
                <label class="layui-form-label plaintextIsChange">属性：</label>
                <div class="layui-input-block">
                    <textarea name="plaintext" id="plaintext" placeholder="" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item form-div-margin-right">
            <div class="layui-col-lg6 width-lg10">
                <label class="layui-form-label descriptionIsChange">描述：</label>
                <div class="layui-input-block">
                    <textarea name="description" id="description" placeholder="" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item form-div-margin-right">
            <div class="layui-col-lg4">
                <label class="layui-form-label priceIsChange">价格：</label>
                <div class="layui-input-block">
                    <input type="text" name="price" lay-verify="number|price" id="price" value=""  autocomplete="off" class="layui-input hero-inp">
                </div>
            </div>
            <div class="layui-col-lg4">
                <label class="layui-form-label sellIsChange">出售价：</label>
                <div class="layui-input-block">
                    <input type="text" name="sell" lay-verify="number|price" id="sell" value=""  autocomplete="off" class="layui-input hero-inp">
                </div>
            </div>
            <div class="layui-col-lg4">
                <label class="layui-form-label totalIsChange">合成价：</label>
                <div class="layui-input-block">
                    <input type="text" name="total" lay-verify="number|price" id="total" value=""  autocomplete="off" class="layui-input hero-inp">
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item form-div-margin-right">
            <div class="layui-col-lg6 width-lg10">
                <label class="layui-form-label intoIsChange">可合成物品：</label>
                <div class="layui-input-block">
                    <select name="into" xm-select-search xm-select-height="40px" xm-select="into">
                        {foreach $all_item as $val}
                        <option value="{$val.itemId}">{$val.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item form-div-margin-right">
            <div class="layui-col-lg6 width-lg10">
                <label class="layui-form-label suitHeroIdIsChange">适用英雄：</label>
                <div class="layui-input-block">
                    <select name="hero" xm-select-search xm-select-height="40px" xm-select="hero">
                        {foreach $all_hero as $val}
                        <option value="{$val.heroId}">{$val.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item">
            <div class="layui-col-lg6 width-lg10">
                <label class="fromIsChange title-font">合成所需：</label>
            <div id="props-search">
                <div class="props-inp-box">
                    <div class="inp-box">
                        <div class="daoju"></div>
                        <input type="text" class="search-inp layui-input" placeholder="请输入"></input>
                        <div class="select-icon"><span class=" selectData"><i class="iconfont icon-webicon215"></i><i class="iconfont icon-webicon216" style="display: none;"></i></span></div>
                    </div>
                </div>
                <div class="propS" style="display: none;">
                </div>
            </div>
            </div>
        </div>
        <div class="layui-row layui-col-space12 layui-form-item">
            <div class="layui-col-lg6">
                <label class="layui-form-label">变更历史：</label>
                <div class="layui-input-block" id="history" style="line-height: 36px">
                </div>
            </div>
            <div class="layui-col-lg6">
                <label class="layui-form-label">是否隐藏：</label>
                <div class="layui-input-block" style="margin-top: 6px;">
                    <input type="radio" name="isHide" value="0" title="展示" checked>
                    <input type="radio" name="isHide" value="1" title="隐藏" >
                    <!--<input type="text" name="total" lay-verify="number" id="total" value=""  autocomplete="off" class="layui-input">-->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edititem">保存</button>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript" src="Public/Plug/layui/layui.js"></script>
<script type="text/javascript" src="Public/Plug/layui/extend/formSelects-v4.js" charset="utf-8"></script>

<script>

    layui.use(['layer','element','form'], function() {
        var	$ = layui.jquery,
            element = layui.element,
            form = layui.form;
        var formSelects = layui.formSelects;
        //formSelects多选下拉框自定义搜索
        formSelects.filter(function(id, inputVal, choice, isDisabled){
            if(choice.name.indexOf(inputVal) != -1 || choice.value.indexOf(inputVal) != -1){
                return false;
            }
            return true;
        });

        form.verify({
            price: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value > 2147483647){
                    return '价格超出范围';
                }

            }


        });



        function fromInit() {
            var url = "{U('Prop/getAllItemAjax')}";
            var listdata =[];
            $.get(url,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                listdata = data.jData;
                // 初始化合成所需下拉框数据
                $(".search-inp").val('')
                $(".propS").html('')
                $(".propS").hide()
                for(var i = 0; i < listdata.length;i++ ){
                    $(".propS").append('<p><span class="childId hide">'+ listdata[i].itemId +'</span><span class="childName">'+listdata[i].name+'</span></p>');
                    //
                }

                // 显示下拉框
                // $(".selectData").click(function(){
                //     //slidetoggle
                //     $(".propS").toggle();
                // });
                
                $(".props-inp-box").click(function(){
                    //slidetoggle
                    $(".propS").toggle();
                    $(this).find("i.iconfont").toggle();

                });
                // 搜索事件
                $(".inp-box .search-inp").keyup(function(){

                    $(".propS").show();
                    var inpVal = $(this).val();

                    var seldata = listdata;
                    $(".propS").empty();// 清空select值

                    if(inpVal){
                        var a = []; //
                        //有值 把符合条件的值放入一个声明的变量
                        for (var i = 0; i < seldata.length; i++) {
                            var text = seldata[i].name;
                            var id = seldata[i].itemId;

                            var indexof = text.indexOf(inpVal) && id.indexOf(inpVal);
                            if (indexof > -1) {
                                a.push(text)
                                $(".propS").append('<p><span class="childId hide">'+ id +'</span><span class="childName child-li">'+text+'</span></p>');

                            } else {}
                        }
                        if(a.length <= 0){
                            //循环显示符合条件的值
                            // for (var i = 0; i < a.length; i++) {
                            //     var text = a[i]
                            //     $(".propS").append("<span class='child-li'>" + text + "</span>")
                            // }
                            $(".propS").append('<div class="mg-no">没有对应数据</div>');
                        }

                    } else { //搜索框为空的情况
                        for (var i = 0; i < seldata.length; i++) {
                            var text = seldata[i].name;
                            var id = seldata[i].itemId;
                            $(".propS").append('<p><span class="childId hide">'+ id +'</span><span class="childName child-li">'+text+'</span></p>');
                        }
                    }
                });
            })
        }

        fromInit()


        $(document).on("click",".propS p",function() {
            var itemId = $(this).find('.childId').text();
            var name = $(this).find('.childName').text();
            $("#props-search .props-inp-box .daoju").append('<span><span class="iteId hide" style="display: none;">'+itemId+'</span>'+name+'<i class="del-dj">X</i></span>');
            // 删除当前选择的元素
            $(".del-dj").click(function(){
                $(this).parent().remove();
            });
        });

        $(document).on("click",".del-dj",function(e){
            $(this).parent().remove();
        });




        // 关闭编辑框
        $(".modal-header a, .modal-box").click(function () {
            $("#jSearchItemDiv .item-div .sbg").hide();
            floathide()
        })

        //点击分类显示子分类
        form.on('radio(prop-type)', function(data){
            var type_id = data.value;
            var url = "{U('Prop/getchildType')}";
            var param = {
                'type_id': type_id,
            }

            //点击分类显示子分类
            $.get(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                data = data.jData;
                var str = "";
                if (data.length > 0){
                    for (i=0;i<data.length;i++){
                        str += '<input type="radio" lay-filter="prop-ctype" name="ctype_id" value="'+data[i]['alias']+'" title="'+data[i]['title']+'">';
                    }
                }
                $("#child").html(str);
                $("#child").removeClass('layui-hide');
                $("#child").addClass('layui-show');
                form.render("radio");

            })

            $("button#search").click()

        });

        form.on('radio(prop-ctype)', function(data){
            $("button#search").click()
        });

        form.on('select(prop-map)', function(data){
            $("button#search").click()
        });

        function changeSubmit()
        {
            $("button#search").click()
        }

        //道具搜索
        form.on('submit(formDemo)', function(data){
            floathide()

            var url = "{U('Prop/searchItem')}";
            var param = data.field;
            $.get(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                //道具详情
                var item = data.jData;

                var str = '';
                if (item.length == 0) {
                    str = '<div style="align-content: center;margin-left: 50%;" >没有找到数据</div>';
                }else {
                    for (i = 0; i < item.length; i++) {
                        str += '<div class="item-div layui-col-md1 " >\n' +
                            '                <div style="position: relative" class="item" id="' + item[i]['id'] + '" >\n' +
                            '                    <img  width="64px" height="64px" src="' + item[i]['iconPath'] + '" alt="' + item[i]['itemId']+item[i]['name'] + '" >\n';

                        if (item[i]['isUpdate'] == 1) {
                            str += '<div class="is-update">有更新</div>\n'
                        }
                        str += '                </div>\n' +
                            '                <p>' + item[i]['name'] + '</p>\n' +
                            '                <span class="sbg"><i class="commspr commico-search"></i></span></div>';


                    }
                }
                $("#jSearchItemDiv").html(str);


            });
            return false;

        });

        //道具编辑浮层展示
        $(document).on("click",".item",function(e){
            $("#id").val('');
            $("#itemId").val('');
            $("#price").val('')
            $("#sell").val('');
            $("#total").val('');
            $("#plaintext").val('');
            $("#description").val('');

            // 重置可多选下拉框
            $(".propS").hide();
            //道具合成所需初始化
            $("#props-search .props-inp-box .daoju").html('')
            $(".props-inp-box").find(".icon-webicon215").show();
            $(".props-inp-box").find(".icon-webicon216").hide();
            
            
            // 选中
            $(this).parent().find(".sbg").show();
            $(this).parent().siblings().children('.sbg').hide();

            var id = $(this).attr('id');

            if ($("#item-edit").hasClass('layui-show') && id == $("#item-edit").attr('lay-data')) {
                floathide()
                return;
            }

            //显示浮层
            ev =  window.event;
            var mousePos = mouseCoords(ev),
                popLeft = mousePos.x,
                popTop = mousePos.y,
                winW = window.innerWidth-700,
                winH = window.innerHeight,
                pageH = document.documentElement.clientHeight,
                tmpx = winW - popLeft;
            if (tmpx < 700) {
                popLeft = popLeft - 700;
            }
            if (popLeft < 10)
            {
                popLeft = 10;
            }
            $("#item-edit")[0].style.left = popLeft + 20 + "px";
            $("#item-edit")[0].style.top = popTop + 20 + "px";
            $("#item-history")[0].style.top = popTop - 150 + "px";
            floatshow()
            $("#item-edit").attr('lay-data',id)
            //重置数据
            $(".map").prop('checked',false);

            $('input[name="isHide"]').prop('checked',false);

            //获取道具详细信息
            var url = "{U('Prop/getItem')}";
            var param = {
                'id': id,
            }

            $.get(url,param,function (res) {
                //由JSON字符串转换为JSON对象
                var data = eval('(' + res + ')');
                //道具详情
                var item = data.jData.item;
                var history = data.jData.history;
                var maps = item.maps;
                var into = item.into;
                var from = item.from;

                var hero = item.hero;
                //填充数据
                $("#id").val(item.id);
                $("#itemId").val(item.itemId);
                $("#price").val(item.price)
                $("#sell").val(item.sell);
                $("#total").val(item.total);
                $("#plaintext").val(item.plaintext);
                $("#description").val(item.description);

                $.each(item, function(key, value){
                    if(key.indexOf("IsChange") != -1){
                        if(value === 1){
                            $("."+key).addClass('blue');
                        }else{
                            $("."+key).removeClass('blue');
                        }
                    }
                });

                //所属地图
                for (i=0;i<maps.length;i++) {
                    $('input[value="'+maps[i]+'"]').prop('checked',true);
                }

                $('input[name="isHide"][value="'+item.isHide+'"]').prop('checked',true);

                //合成所需
                $("#props-search .props-inp-box .daoju").html('')
                for (i=0;i<from.length;i++)
                {
                    // if(!from[i] == null){
                        $("#props-search .props-inp-box .daoju").append('<span><span class="iteId hide" style="display: none;">'+from[i]['itemId']+'</span>'+from[i]['name']+'<i class="del-dj">X</i></span>');
                    // }

                }

                formSelects.value('into', into);
                // formSelects.value('from', from);
                formSelects.value('hero', hero);

                var str = '';
                for (i=0;i<history.length;i++){
                    str += '<div class="his-row" ><a href="#" style="text-decoration: underline">'+history[i]['versionNumber']+'</a></div>';
                }
                $("#history").html(str);

                //变更历史
                str = '<h2 class="layui-colla-title">'+item.name+'变更历史</h2><div class="layui-colla-content layui-show">';
                if (history.length>0){
                    for (i=0;i<history.length;i++){
                        str += '<div style="margin-bottom: 20px">\n' +
                            '                                <div>'+history[i]['versionNumber']+'</div>\n' +
                            '                                <hr/>\n' +
                            '                                <div class="layui-row">\n' +
                            '                                    <table class="layui-table">\n' +
                            '                                        <colgroup>\n' +
                            '                                            <col width="150">\n' +
                            '                                            <col width="200">\n' +
                            '                                            <col>\n' +
                            '                                        </colgroup>\n' +
                            '                                        <tbody>\n' +
                            '                                        <tr>\n' +
                            // '                                            <td>别称:无</td>\n' +
                            '                                            <td>价格: '+history[i]['price']+'</td>\n' +
                            '                                            <td>出售价: '+history[i]['sell']+'</td>\n' +
                            '                                            <td>合成价: '+history[i]['total']+'</td>\n' +
                            '                                        </tr>\n' +
                            '                                        <tr>\n' +
                            '                                            <td colspan="2">属性: '+history[i]['plaintext']+'</td>\n' +
                            '                                            <td colspan="2">描述: '+history[i]['description']+'</td>\n' +
                            // '                                            <td colspan="2"><textarea name="description" id="description" placeholder="" class="layui-textarea">描述: '+history[i]['description']+'</textarea></td>\n' +
                            '                                        </tr>\n' +
                            '                                        <tr>\n' +
                            '                                            <td colspan="3">可合成: '+history[i]['into']+'</td>\n' +
                            '                                        </tr>\n' +
                            '                                        <tr>\n' +
                            '                                            <td colspan="3">合成所需: '+history[i]['from']+'</td>\n' +
                            '                                        </tr>\n' +
                            '                                        <tr>\n' +
                            '                                            <td colspan="3">适用英雄:'+history[i]['suitHeroId']+'</td>\n' +
                            '                                        </tr>\n' +
                            '                                        </tbody>\n' +
                            '                                    </table>\n' +
                            '                                </div>\n' +
                            '                            </div>'
                    }
                    str += '</div>';
                    $("#item-history-content").html(str);
                }

                form.render();

            });

            return;
        });
        // 道具编辑
        form.on('submit(edititem)', function(data){
            var url = "{U('Prop/editItem')}";

            var itemFrom = '';
            $(".daoju span .iteId").each(function () {
                itemFrom += $(this).text() + ',';
            });
            itemFrom = itemFrom.substr(0, itemFrom.length - 1);
            data.field['from'] = itemFrom;
            $.post(url,data.field,function (res) {
                var data = eval('(' + res + ')');
                if (data.iRet === 0){
                    layer.msg('保存成功', {
                        icon: 1,//成功的表情
                        time: 1000
                    });
                    floathide()
                    $("button#search").click()

                }else {
                    layer.msg(data.sMsg, {
                        icon: 2,
                        time: 1000
                    });
                }
            });

            // fromInit()
            return false;


        });

        //浮层隐藏
        function floathide() {
            $("#item-edit").removeClass('layui-show');
            $("#item-edit").addClass('layui-hide');
            $("#item-history").removeClass('layui-show');
            $("#item-history").addClass('layui-hide');


        }

        //浮层展示
        function floatshow() {
            $("#item-edit").removeClass('layui-hide');
            $("#item-edit").addClass('layui-show');
            $("#item-history").removeClass('layui-hide');
            $("#item-history").addClass('layui-show');
        }



        //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        //
        //     // window.location.href = "/index.php?route=Prop/index&iActId=1001"
        //     // return false;
        // });

        // 物品详情
        function mouseCoords(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            }
        }

        function mouseMove(ev) {
            ev = ev || window.event;
            var mousePos = mouseCoords(ev),
                popLeft = mousePos.x,
                popTop = mousePos.y,
                winW = window.innerWidth,
                winH = window.innerHeight,
                pageH = document.documentElement.clientHeight,
                tmpx = winW - popLeft;
            if (tmpx < 500) {
                popLeft = popLeft - 480;
            }
            $("#popPupItem")[0].style.left = popLeft + 20 + "px";
            $("#popPupItem")[0].style.top = popTop + 20 + "px";
            $("#popPupItem")[0].style.display = "block";
            //填充预览数据
            var img = this.getAttribute("src");
            $("#preview-img").attr('src',this.getAttribute("src"));
            var json = this.getAttribute("lay-data");
            var json =  eval('(' + json + ')');
            $("#preview-name").html(json.name);
            $("#preview-price").html(json.price);
            $("#preview-desc").html(json.description);

            var from = json.from;
            var str = '<ul>'

            if (from != null){
                for(i=0; i<from.length; i++){
                    str += '<li class="tree-count4"><img src="'+from[i]+'"></li>';
                }
            }
            str += '</ul>'


            $("#tree").html(str)

        }
        function showPopup() {
            var moversw = $("#jSearchItemDiv img"),
                mord = 0;
            for (var i = 0, len = moversw.length; i < len; i++) {
                moversw[i].count = i;
                //鼠标移动时事件
                moversw[i].onmousemove = mouseMove;
                //事件会在鼠标指针移动到指定的对象上时发生。（颜色改变）
                moversw[i].onmouseover = function () {
                    moversw[mord].className = "";
                    moversw[this.count].className = "current";
                    mord = this.count;
                }
                //鼠标移开事件
                moversw[i].onmouseout = function () {
                    $("#popPupItem")[0].style.display = "none";
                    moversw[this.count].className = "";
                };
            };
        }
        // showPopup();



    });

</script>
</body>

</html>